RELLENO
Acolchado-Lados individuales
Este elemento <div> tiene un relleno superior de 50px, derecho de 30px, inferior de 50px y izquierdo de 80px.
Relleno - Propiedad abreviada 4 valores
Este elemento <div> tiene un relleno superior de 25px, derecho de 50px, inferior de 75px y izquierdo de 100px.
Propiedad abreviada 3 valores
Este elemento <div> tiene un relleno superior de 25px, un relleno derecho e izquierdo de 50px, y un relleno inferior de 75px.
Propiedad abreviada 2 valores
Este elemento <div> tiene un relleno superior e inferior de 25px, y un relleno derecho e izquierdo de 50px.
Propiedad abreviada de 1 valor
Este elemento <div> tiene un relleno de 25px en la parte superior, inferior, derecha e izquierda.
Acolchado y anchura de los elementos
Relleno y ancho del elemento
Este <div> tiene un ancho de 300px.
El ancho de este <div> es de 350px, aunque en el CSS está definido como 300px.
Relleno y ancho del elemento - con box-sizing
Este <div> tiene un ancho de 300px.
El ancho de este <div> permanece en 300px, a pesar de los 50px de relleno total a la izquierda y derecha, gracias a la propiedad box-sizing: border-box.